<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>今日消息</span>
          </div>
          <div class="text item">
            <el-descriptions :column="2">
              <el-descriptions-item label="今日预约人数">10</el-descriptions-item>
              <el-descriptions-item label="今日评估人数">20</el-descriptions-item>
              <el-descriptions-item label="今日未执行">1566</el-descriptions-item>
              <el-descriptions-item label="今日已执行">7848</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>汇总</span>
          </div>
          <div class="text item">
            <el-descriptions :column="2">
              <el-descriptions-item label="预约人数">1000</el-descriptions-item>
              <el-descriptions-item label="评估人数">2000</el-descriptions-item>
              <el-descriptions-item label="未执行">156416</el-descriptions-item>
              <el-descriptions-item label="已执行">78485411</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <br />
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card class="box-card" >
          <div slot="header" class="clearfix">
            <span>平台概况</span>
          </div>
          <div class="text item">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-card style="width: 150px;" :body-style="{ padding: '0px' }">
                  <img src="../../../img/文件.png">
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    :value="1566"
                  ></el-statistic>
                  <div style="padding: 14px;">
                    <span>评估问卷</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card style="width: 150px;" :body-style="{ padding: '0px' }">
                  <img src="../../../img/用户.png">
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    :value="9887"
                  ></el-statistic>
                  <div style="padding: 14px;">
                    <span>预约人数</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card style="width: 150px;" :body-style="{ padding: '0px' }">
                  <img src="../../../img/方案.png">
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    :value="8454"
                  ></el-statistic>
                  <div style="padding: 14px;">
                    <span>干预方案</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card style="width: 150px;" :body-style="{ padding: '0px' }">
                  <img src="../../../img/地址.png">
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    :value="1157"
                  ></el-statistic>
                  <div style="padding: 14px;">
                    <span>干预追踪</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" >
          <div slot="header" class="clearfix">
            <span>会员统计</span>
          </div>
          <div class="text item">
            <el-row :gutter="15">
              <el-col :span="8">
                <el-card style="width: 200px;" :body-style="{ padding: '0px' }">
                  <img src="../../../img/添加用户.png" />
                  <el-statistic
                    group-separator=","
                    :value="9547"
                  ></el-statistic>
                  <div style="padding: 14px;">
                    <span>今日新增会员</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card style="width: 200px;" :body-style="{ padding: '0px' }">
                  <img src="../../../img/登录会员.png" />
                  <el-statistic
                    group-separator=","
                    :value="59448"
                  ></el-statistic>
                  <div style="padding: 14px;">
                    <span>今日登录会员</span>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card style="width: 200px;" :body-style="{ padding: '0px' }">
                  <img src="../../../img/会员总数.png" />
                  <el-statistic
                    group-separator=","
                    :value="419648"
                  ></el-statistic>
                  <div style="padding: 14px;">
                    <span>会员总数</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>

      </el-col>
    </el-row>
    <br />
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>健康系统流程图</span>
      </div>
      <div>
        <el-steps :active="1">
          <el-step title="新建档案" icon="el-icon-document" @onclick="handleStepClick" />
          <el-step title="会员预约" icon="el-icon-upload" />
          <el-step title="导入体验数据" icon="el-icon-magic-stick" />
          <el-step title="采集体检数据" icon="el-icon-s-operation" />
          <el-step title="健康评估问卷" icon="el-icon-s-order" />
          <el-step title="中医体质辨识" icon="el-icon-s-custom" />
          <el-step title="人群分类" icon="el-icon-s-check" />
          <el-step title="干预方案" icon="el-icon-picture" />
          <el-step title="随访日记" icon="el-icon-collection" />
          <el-step title="微信提醒" icon="el-icon-chat-line-round" />
          <el-step title="干预效果评估" icon="el-icon-notebook-2" />
        </el-steps>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['token'])
  },
  mounted() {
    console.log(this.token);
    // 在这里通过 this.token 获取到 token 值
  },
  }
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
